<!-- 风控分析 -->
<template>
    <div>
        <!-- 第二行 -->
        <div class="module-box">
            <!-- 左 -->
            <div style="flex:0 1 25%">
                <!--累计投保企业数  投保总人数-->
                <div class="analysisTopLeftTwo">
                    <div class="analysisTopLeftTwoText">
                        <span>
                            累计投保企业数
                        </span>
                        <div class="yellowText">
                            113 家
                        </div>
                    </div>
                    <div class="analysisTopLeftTwoText">
                        <span>
                            投保总人数
                        </span>
                        <div class="yellowText">
                            5291 人
                        </div>
                    </div>
                </div>
                <!-- 风险四色 -->
                <div class="analysisTopTextLeft">
                    <div style="width: 100%; margin-bottom: 4px;">风险四色</div>
                    <!-- <dv-decoration-10 style="height: 5px;width: 100%;" /> -->
                </div>
                <!-- 条形图 -->
                <div style="width: 100%;">
                    <div id="barChart"></div>
                </div>
                <!-- 风险辨识 -->
                <div class="analysisTopTextLeftRisk">
                    <div style=" margin-bottom: 8px;">风险辨识</div>
                    <div style=" margin-bottom: 8px; font-size: 13px;line-height: 25px;color: #7f7f7f;">总辨识风险源：25处
                    </div>
                    <el-select v-model="industryType" clearable placeholder="请选择" :popper-append-to-body="false"
                        size="mini">
                        <el-option v-for="item in  industryTypeOption" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- <dv-decoration-10 style="height: 5px;width: 100%;" /> -->
                </div>
                <!-- 轮播表 -->
                <div style="width: 100%;">
                    <dv-scroll-board :config="configRisk" style="width:99%;height:220px" />
                </div>
                <!-- 各区域前三类易发事故情况 -->
                <div class="analysisTopTextLeftSituation">
                    <div style="width: 100%; margin-bottom: 4px;">各区域前三类易发事故情况</div>
                    <!-- <dv-decoration-10 style="height: 5px;width: 100%;" /> -->
                </div>
                <!-- 柱状图 -->
                <div style="width: 100%;">
                    <div id="analysisHistogram2"></div>
                </div>
            </div>
            <!-- 中 -->
            <div style="flex:0 1 50%">
                <!-- 下拉选择 -->
                <div class="analysisTopMiddleSelect">
                    <div class="analysisSelectBox">
                        <div style="display:flex;">
                            <el-select size="mini" v-model="areaValue" clearable placeholder="请选择区域"
                                :popper-append-to-body="false">
                                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select size="mini" v-model="streetValue" clearable placeholder="请选择街道"
                                :popper-append-to-body="false">
                                <el-option v-for="item in  streetOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="display:flex; ">
                            <el-select size="mini" v-model="yearValue" clearable placeholder="年份"
                                :popper-append-to-body="false">
                                <el-option v-for="item in  yearOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="typeValue" clearable placeholder="请选择" :popper-append-to-body="false"
                                size="mini">
                                <el-option v-for="item in  typeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <dv-decoration-3 style="width: 100%; height:5px;margin-top: 8px;" />

                </div>
                <div style="width:100%;height:520px;">
                    <NingboMap style="width:100%"></NingboMap>
                    <!-- <el-button style="margin:8px 8px" size="mini" @click="getNingboChart">宁波市</el-button>
                    <div style="width: 100%;">
                        <div id="analysisMap1"></div>
                    </div> -->
                </div>
                <!-- <dv-border-box-9 style="width:100%;height:520px;"> -->

                <!-- https://geo.datav.aliyun.com/areas_v3/bound/330200_full.json -->
                <!-- <dv-flyline-chart :config="config4" style="width:100%;height:100%;" /> -->
                <!-- </dv-border-box-9> -->
                <!-- 教育培训 -->
                <div class="education">
                    <div style="width: 94%; margin-bottom: 4px; margin-left: 3%;">
                        <div style=" border-bottom: 1px dashed #409EFF;">
                            教育培训
                        </div>
                    </div>
                    <div class="bottomFourBox">
                        <div class="analysisBox1">
                            <div style="font-size:13px;margin-left: 12px;margin-top: 18px;">累计培训企业家数</div>
                            <div style="font-size:28px;margin-left: 12px;">24<span
                                    style="font-size:13px;margin-left: 8px;">家</span>
                            </div>
                            <div style="margin-right: 10px;margin-top: 24px; text-align:right">
                                <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="55px" height="64px"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g transform="matrix(1 0 0 1 -641 -804 )">
                                        <path
                                            d="M 55 59.27272727272727  L 50 59.27272727272727  L 50 10.75  C 50.416666666666664 10.125  49.90104166666667 9.613636363636363  49.270833333333336 10  L 36.666666666666664 10  L 36.666666666666664 1.3181818181818181  C 36.666666666666664 0.6931818181818182  36.151041666666664 0.18181818181818182  35.520833333333336 1  L 5.729166666666667 1  C 5.098958333333334 0.18181818181818182  4.583333333333333 0.6931818181818182  5 1.3181818181818181  L 5 59.27272727272727  L 0 59.27272727272727  L 0 63  L 55 63  L 55 59.27272727272727  Z M 18.333333333333332 45.63636363636363  L 18.333333333333332 50.18181818181818  L 13.75 50.18181818181818  L 13.75 45.63636363636363  L 18.333333333333332 45.63636363636363  Z M 18.333333333333332 36.54545454545455  L 18.333333333333332 41.09090909090909  L 13.75 41.09090909090909  L 13.75 36.54545454545455  L 18.333333333333332 36.54545454545455  Z M 18.333333333333332 27.454545454545453  L 18.333333333333332 32  L 13.75 32  L 13.75 27.454545454545453  L 18.333333333333332 27.454545454545453  Z M 18.333333333333332 18.363636363636363  L 18.333333333333332 22.90909090909091  L 13.75 22.90909090909091  L 13.75 18.363636363636363  L 18.333333333333332 18.363636363636363  Z M 18.333333333333332 9.272727272727273  L 18.333333333333332 13.818181818181818  L 13.75 13.818181818181818  L 13.75 9.272727272727273  L 18.333333333333332 9.272727272727273  Z M 27.5 45.63636363636363  L 27.5 50.18181818181818  L 22.916666666666668 50.18181818181818  L 22.916666666666668 45.63636363636363  L 27.5 45.63636363636363  Z M 27.5 36.54545454545455  L 27.5 41.09090909090909  L 22.916666666666668 41.09090909090909  L 22.916666666666668 36.54545454545455  L 27.5 36.54545454545455  Z M 27.5 27.454545454545453  L 27.5 32  L 22.916666666666668 32  L 22.916666666666668 27.454545454545453  L 27.5 27.454545454545453  Z M 27.5 18.363636363636363  L 27.5 22.90909090909091  L 22.916666666666668 22.90909090909091  L 22.916666666666668 18.363636363636363  L 27.5 18.363636363636363  Z M 27.5 9.272727272727273  L 27.5 13.818181818181818  L 22.916666666666668 13.818181818181818  L 22.916666666666668 9.272727272727273  L 27.5 9.272727272727273  Z M 41.25 45.63636363636363  L 41.25 50.18181818181818  L 36.666666666666664 50.18181818181818  L 36.666666666666664 45.63636363636363  L 41.25 45.63636363636363  Z M 41.25 36.54545454545455  L 41.25 41.09090909090909  L 36.666666666666664 41.09090909090909  L 36.666666666666664 36.54545454545455  L 41.25 36.54545454545455  Z M 41.25 27.454545454545453  L 41.25 32  L 36.666666666666664 32  L 36.666666666666664 27.454545454545453  L 41.25 27.454545454545453  Z M 41.25 18.363636363636363  L 41.25 22.90909090909091  L 36.666666666666664 22.90909090909091  L 36.666666666666664 18.363636363636363  L 41.25 18.363636363636363  Z "
                                            fill-rule="nonzero" fill="#f2f2f2" stroke="none"
                                            transform="matrix(1 0 0 1 641 804 )" />
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <div class="analysisBox2">
                            <div style="font-size:13px;margin-left: 12px;margin-top: 18px;">累计培训次数</div>
                            <div style="font-size:28px;margin-left: 12px;">25<span
                                    style="font-size:13px;margin-left: 8px;">次</span>
                            </div>
                            <div style="margin-right: 10px;margin-top: 24px; text-align:right">
                                <svg t="1669774539620" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="9153" width="64" height="64">
                                    <path
                                        d="M122.368 165.888h778.24c-9.216 0-16.384-7.168-16.384-16.384v713.728c0-9.216 7.168-16.384 16.384-16.384h-778.24c9.216 0 16.384 7.168 16.384 16.384V150.016c0 8.192-6.656 15.872-16.384 15.872z m-32.768 684.544c0 26.112 20.992 47.104 47.104 47.104h750.08c26.112 0 47.104-20.992 47.104-47.104V162.304c0-26.112-20.992-47.104-47.104-47.104H136.704c-26.112 0-47.104 20.992-47.104 47.104v688.128z"
                                        p-id="9154" fill="#f2f2f2"></path>
                                    <path
                                        d="M305.664 344.576h43.008v306.176H296.448V435.2c-23.552 19.968-50.688 33.792-81.408 43.008V424.448c46.592-19.456 76.8-46.08 90.624-79.872zM598.528 603.648v47.616h-189.44v-32.768c20.48-41.472 50.176-77.824 88.576-109.568 35.328-29.696 52.736-55.296 51.712-76.8 0-29.696-14.336-44.544-43.008-44.544-19.968 1.024-34.816 17.408-46.08 48.64l-47.616-20.48c17.92-51.2 50.688-76.8 99.328-76.8 55.296 3.072 84.992 33.28 88.576 90.112 2.048 38.4-20.48 75.776-66.56 112.64-25.6 19.968-46.592 40.448-61.952 61.952h126.464zM617.984 569.856l47.616-11.776c6.144 34.304 20.992 51.712 46.08 51.712 30.72 0 46.08-15.872 46.08-47.616-1.024-29.696-16.384-45.056-46.08-46.08h-33.792v-47.616h23.552c29.696-1.024 45.056-15.872 46.08-44.544-1.024-23.552-12.288-35.84-33.792-36.864-22.528 1.024-36.352 16.896-41.472 47.616l-48.64-13.312c12.8-54.272 42.496-81.92 88.576-82.944 56.32 2.048 85.504 31.232 87.552 87.552 0 27.648-12.288 48.128-36.864 61.952 31.744 13.824 47.616 38.4 47.616 74.24-2.048 59.392-34.304 90.112-97.792 93.184-54.784 0-86.016-28.16-94.72-85.504z"
                                        p-id="9155" fill="#f2f2f2"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="analysisBox3">
                            <div style="font-size:13px;margin-left: 12px;margin-top: 18px;">累计培训人数</div>
                            <div style="font-size:28px;margin-left: 12px;">264<span
                                    style="font-size:13px;margin-left: 8px;">人</span>
                            </div>
                            <div style="margin-right: 10px;margin-top: 24px; text-align:right">
                                <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="59px" height="64px"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g transform="matrix(1 0 0 1 -1029 -804 )">
                                        <path
                                            d="M 18 42.88647959183673  L 17.597116712707184 42.88647959183673  C 15.57255697513812 40.87755102040817  14.43294630524862 38.141581632653065  15 35.278061224489804  L 15 23.919642857142858  C 14.43294630524862 21.783163265306122  15.056867230662986 19.793367346938776  16.139179040055254 18.116071428571427  C 15.64258891574586 17.994897959183675  15.139632251381219 17.931122448979593  14.63030904696133 17.931122448979593  L 6.563902796961327 17.931122448979593  C 2.960441125690609 17.931122448979593  0.012733080110497817 20.92219387755102  0 24.56377551020408  L 0 35.003826530612244  C 0.012733080110497817 37.47831632653061  1.3815391919889508 39.74872448979592  4 40.890306122448976  L 4 61.29209183673469  L 8.843124136740334 61.29209183673469  L 10.791285393646408 48.37755102040816  L 12.739446650552486 61.29209183673469  L 18 61.29209183673469  L 18 42.88647959183673  Z M 37 63.88775510204081  L 37 41.70663265306123  C 39.26881906077348 40.507653061224495  40.85408753453039 38.06505102040816  40 35.278061224489804  L 40 23.919642857142858  C 40.85408753453039 19.952806122448983  37.64535134668509 16.700255102040817  33.723562672651944 16.700255102040817  L 24.937737396408846 16.700255102040817  C 21.015948722375693 16.700255102040817  17.80721253453039 19.946428571428573  18 23.919642857142858  L 18 35.2780612244898  C 17.80721253453039 38.058673469387756  19.3797479281768 40.482142857142854  22 41.6875  L 22 63.88775510204081  L 27.42705455801105 63.88775510204081  L 29.54711239640883 49.838010204081634  L 31.667170234806626 63.88775510204081  L 37 63.88775510204081  Z M 22.02186205110497 7.720663265306124  C 22.02186205110497 3.5051020408163276  25.383395200276244 0.11224489795918455  29.53437931629834 0.11224489795918367  C 33.68536343232045 0.11224489795918367  37.046896581491715 3.5178571428571432  37.046896581491715 7.720663265306124  C 37.046896581491715 11.917091836734697  33.68536343232045 15.329081632653063  29.53437931629834 15.329081632653063  C 25.383395200276244 15.329081632653063  22.02186205110497 11.923469387755102  22.02186205110497 7.720663265306124  Z M 44 35.29081632653061  C 44.311118784530386 38.18622448979592  43.13330887430939 40.91581632653062  41 42.88647959183673  L 41 61.30484693877551  L 45.99825189917127 61.30484693877551  L 47.94641315607735 48.390306122448976  L 49.89457441298343 61.30484693877551  L 55 61.30484693877551  L 55 40.90943877551021  C 57.28612741712707 39.79974489795919  58.72496546961326 37.57397959183674  58 35.02295918367347  L 58 24.5765306122449  C 58.72496546961326 20.928571428571427  55.7708908839779 17.94387755102041  52.167429212707184 17.94387755102041  L 44.11375604281768 17.94387755102041  C 43.59169975828729 17.94387755102041  43.0823765538674 18.00765306122449  42.60488604972376 18.128826530612244  C 43.72539709944751 19.85714285714286  44.31748532458563 21.872448979591837  44 23.932397959183675  L 44 35.29081632653061  Z M 54.86047565607735 9.67219387755102  C 54.86047565607735 5.807397959183675  51.77270372928177 2.6887755102040822  47.965512776243095 2.688775510204082  C 44.145588743093924 2.688775510204082  41.05781681629834 5.813775510204081  41.05781681629834 9.67219387755102  C 41.05781681629834 13.53061224489796  44.145588743093924 16.661989795918366  47.965512776243095 16.661989795918366  C 51.77270372928177 16.661989795918366  54.86047565607735 13.536989795918368  54.86047565607735 9.67219387755102  Z M 3.883589433701658 9.67219387755102  C 3.877222893646409 5.807397959183675  6.964994820441989 2.6887755102040822  10.778552313535911 2.688775510204082  C 14.585743266574585 2.688775510204082  17.686248273480665 5.813775510204081  17.686248273480665 9.67219387755102  C 17.686248273480665 13.53061224489796  14.598476346685082 16.661989795918366  10.778552313535911 16.661989795918366  C 6.964994820441989 16.661989795918366  3.883589433701658 13.536989795918368  3.883589433701658 9.67219387755102  Z "
                                            fill-rule="nonzero" fill="#f2f2f2" stroke="none"
                                            transform="matrix(1 0 0 1 1029 804 )" />
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <div class="analysisBox4">
                            <div style="font-size:13px;margin-left: 12px;margin-top: 18px;">累计培训时长</div>
                            <div style="font-size:28px;margin-left: 12px;">2348<span
                                    style="font-size:13px;margin-left: 8px;">分钟</span>
                            </div>
                            <div style="margin-right: 10px;margin-top: 24px; text-align:right">
                                <svg t="1669774053906" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5264" width="64" height="64">
                                    <path
                                        d="M673.7 569.8l-141-81.4V200.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8V512h0.2l-0.2 0.3L653 605.7c9.9 5.7 22.6 2.3 28.3-7.6 5.7-9.9 2.3-22.6-7.6-28.3zM221.5 491.3h-20.8c-11.5 0-20.8 9.3-20.8 20.8s9.3 20.8 20.8 20.8h20.8c11.5 0 20.8-9.3 20.8-20.8 0-11.6-9.3-20.8-20.8-20.8zM512 781.8c-11.5 0-20.8 9.3-20.8 20.8v20.8c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8v-20.8c0-11.6-9.3-20.8-20.8-20.8zM823.3 491.3h-20.8c-11.5 0-20.8 9.3-20.8 20.8s9.3 20.8 20.8 20.8h20.8c11.5 0 20.8-9.3 20.8-20.8s-9.4-20.8-20.8-20.8z"
                                        p-id="5265" fill="#f2f2f2"></path>
                                    <path
                                        d="M512 97C282.8 97 97 282.8 97 512s185.8 415 415 415 415-185.8 415-415S741.2 97 512 97z m0 788.5c-205.9 0-373.5-167.6-373.5-373.5S306.1 138.5 512 138.5 885.5 306.1 885.5 512 717.9 885.5 512 885.5z"
                                        p-id="5266" fill="#f2f2f2"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <!-- <dv-decoration-10 style="height: 5px;width: 100%;" /> -->
                </div>
            </div>
            <!-- 右 -->
            <div style="flex:0 1 25%">
                <!--隐患总数  一般隐患 重大隐患-->
                <div class="topRightTwo">
                    <div class="topRightTwoText">
                        <span>
                            隐患总数
                        </span>
                        <div class="yellowText">
                            62 个
                            <span style="color:#409EFF;font-size: 8px; line-height: 20px;margin-left: 5px;">85%</span>
                        </div>
                    </div>
                    <div class="topRightTwoText">
                        <span>
                            一般隐患
                        </span>
                        <div class="yellowText">
                            51 个
                            <span style="color:#409EFF;font-size: 8px; line-height: 20px;margin-left: 5px;">85%</span>

                        </div>
                    </div>
                    <div class="topRightTwoText">
                        <span>
                            重大隐患
                        </span>
                        <div class="redText">
                            11 个
                            <span style="color:#409EFF;font-size: 8px; line-height: 20px;margin-left: 5px;">85%</span>

                        </div>
                    </div>
                </div>
                <!-- 各区域前三类隐患类型情况 -->
                <div class="analysisOverviewRight">
                    <div style="margin-right:0px;width: 100%;margin-bottom: 4px;">各区域前三类隐患类型情况</div>
                    <!-- <dv-decoration-10 style="width: 100%; height:5px;transform:rotateY(180deg);" /> -->
                </div>
                <!-- 柱状图 -->
                <div style="width: 100%;">
                    <div id="analysisHistogram1"></div>
                </div>
                <!-- 一般隐患类型占比 -->
                <div class="OverviewRightRatio">
                    <el-tabs v-model="activeName" @tab-click="handleClick()" style="margin: 0 0px;">
                        <el-tab-pane label="一般隐患类型占比" name="first">
                        </el-tab-pane>
                        <el-tab-pane label="重大隐患类型占比" name="second">
                        </el-tab-pane>
                    </el-tabs>
                    <div style="display:flex;height: 25px;margin-top: 4px;">
                        <el-select v-model="industryType" clearable placeholder="请选择" :popper-append-to-body="false"
                            size="mini">
                            <el-option v-for="item in  industryTypeOption" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <!-- <div style="margin-right:30px;width: 100%;margin-bottom: 4px;">一般隐患类型占比</div> -->
                    <!-- <dv-decoration-10 style="width: 100%; height:5px;transform:rotateY(180deg);" /> -->
                </div>
                <generalProportion style="width:98%;margin-left: 1%;" v-if="activeName == 'first'"></generalProportion>
                <significantProportion style="width:98%;margin-left: 1%;" v-else></significantProportion>
                <!-- 隐患整改 -->
                <div class="OverviewRightRatio">
                    <el-tabs v-model="RectificationActiveName" @tab-click="handleClickRectification()"
                        style="margin: 0 0px;">
                        <el-tab-pane label="一般隐患类整改" name="first">
                        </el-tab-pane>
                        <el-tab-pane label="重大隐患整改" name="second">
                        </el-tab-pane>
                    </el-tabs>

                </div>
                <generalRectification style="width:98%;margin-left: 1%;" v-if="RectificationActiveName == 'first'">
                </generalRectification>
                <significantRectification style="width:98%;margin-left: 1%;" v-else></significantRectification>
            </div>
        </div>

    </div>
</template>
<script >
import generalProportion from './components/generalProportion.vue'
import generalRectification from './components/generalRectification.vue'
import significantProportion from './components/significantProportion.vue'
import significantRectification from './components/significantRectification.vue'
// import ningboJson from './assets/宁波市.json'
// import ningboJson from '../../../../assets/map/assets/宁波市.json'
// import $ from 'jquery'
import NingboMap from '../subComponents/map.vue'

export default {
    data() {
        return {
            //地图
            // myChartMap: null, // 图表
            // mapName: '宁波市', // 当前map名称
            // // 地图配置项
            // option: {
            //     visualMap: {
            //         min: 1,
            //         max: 1000,
            //         // text: ['高', '低'],
            //         realtime: false,
            //         calculable: true,
            //         inRange: {
            //             color: ['#72c0ff', '#2899ff', '#0053b7']
            //         },
            //         left: "30",
            //         textStyle: {
            //             color: "#fff"
            //         }

            //         // contentColor: "#fff"
            //     },

            //     geo: {
            //         map: "宁波市",
            //         roam: false,// 一定要关闭拖拽
            //         zoom: 1.25,
            //         // center: [105, 36], // 调整地图位置
            //         label: {
            //             normal: {
            //                 show: true, //省份名展示
            //                 fontSize: "10",
            //                 // color: "rgba(0,0,0,0.7)"
            //                 color: "#fff"
            //             },
            //             emphasis: {
            //                 show: true
            //             }
            //         }
            //     },
            //     series: [
            //         {
            //             type: "map",
            //             map: "宁波市",
            //             geoIndex: 0, // 解决设置geo后地图重影问题
            //             zoom: 1.25, //这里是关键，一定要放在 series中
            //             silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
            //             // 鼠标移入高亮区域属性
            //             itemStyle: {

            //                 emphasis: { // 鼠标悬浮地图区域样式
            //                     show: true,
            //                     areaColor: "#309dff",
            //                 },
            //             },
            //             select: { // 地图选中区域样式
            //                 label: { // 选中区域的label(文字)样式
            //                     color: '#fff'
            //                 },
            //                 itemStyle: {// 选中区域的默认样式
            //                     areaColor: '#309dff'
            //                 },
            //             },
            //             // itemSytle: {
            //             //     // color:"",
            //             //     emphasis: {
            //             //         show: true,
            //             //         areaColor: '#309dff', //鼠标滑过区域颜色
            //             //         // color: 'red', //鼠标滑过区域颜色
            //             //     }
            //             //     // borderColor: '#021d60'
            //             // },
            //             data: [ // 这里我写的是静态数据，测试用的，具体情况按你们接口拿到的数据来
            //                 { name: '慈溪市', value: 666 },
            //                 { name: '镇海区', value: 666 },
            //                 { name: '海曙区', value: 666 },
            //                 { name: '江北区', value: 16 },
            //                 { name: '鄞州区', value: 666 },
            //                 { name: '宁海县', value: 66 },
            //                 { name: '奉化区', value: 166 },
            //                 { name: '北仑区', value: 666 },
            //                 { name: '象山县', value: 66 },
            //                 { name: '余姚市', value: 999 }
            //             ]
            //         }
            //     ]
            // },
            //地图end
            //时间显示
            date: new Date(),
            // 切换按钮
            isCollapse: 0,
            areaOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            streetOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            typeOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            yearOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            areaValue: '',
            streetValue: '',
            yearValue: '',
            typeValue: '',
            activeName: 'first',
            RectificationActiveName: 'first',
            industryType: '',
            industryTypeOption: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            //轮播表数据
            configRisk: {
                header: ['易发事故类型', '风险数量', '占比', ''],
                // 奇数行颜色
                oddRowBGC: '#4b7ad6',
                // 偶数行背景色
                evenRowBGC: '#021d60',
                headerBGC: 'transparent',
                data: [
                    ['行1列1', '行1列2', '行1列3'],
                    ['行2列1', '行2列2', '行2列3'],
                    ['行3列1', '行3列2', '行3列3'],
                    ['行4列1', '行4列2', '行4列3'],
                    ['行5列1', '行5列2', '行5列3'],
                    ['行6列1', '行6列2', '行6列3'],
                    ['行7列1', '行7列2', '行7列3'],
                    ['行8列1', '行8列2', '行8列3'],
                    ['行9列1', '行9列2', '行9列3'],
                    ['行10列1', '行10列2', '行10列3']
                ]
            },

        }
    },
    methods: {
        barChart() {
            var chartDom = document.getElementById('barChart');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '风险四色图'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},

                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],

                    splitLine: {
                        show: false
                    }
                },
                yAxis: {

                    type: 'category',
                    data: ['低风险', '一般风险', '较大风险', '重大风险'],
                    nameTextStyle: {
                        fontSize: 6
                    },
                    axisLabel: {
                        textStyle: {
                            show: true,
                            fontSize: '8',
                        },
                    }

                },
                series: [

                    {
                        data: [
                            {
                                name: '低风险',
                                value: 29,
                                type: 'bar',
                                itemStyle: {
                                    color: '#487af7'
                                }
                            },
                            {
                                name: '一般风险',
                                value: 20,
                                type: 'bar',
                                itemStyle: {
                                    color: '#efd62e'
                                }
                            },


                            {
                                name: '较大风险',
                                value: 13,
                                type: 'bar',
                                itemStyle: {
                                    color: '#f08a2a'
                                }
                            },
                            {
                                name: '重大风险',
                                value: 2,
                                type: 'bar',
                                itemStyle: {
                                    color: '#ee4c45'
                                }
                            },

                        ],
                        type: 'bar'
                    }


                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        analysisHistogram1() {
            var chartDom = document.getElementById('analysisHistogram1');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '承保企业数占比',
                //     left: 'center',
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                    bottom: '0'
                },
                grid: {
                    top: '10%',
                    left: '0%',
                    right: '0%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['海曙区', '江北区', '鄞州区', '镇海区', '北仑区', '奉化区', '余姚市', '慈溪市', '宁海区', '象山县']

                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: 'Email',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230,],
                        itemStyle: {
                            color: '#f08a2a'
                        }
                    },
                    {
                        name: 'Union Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290],
                        itemStyle: {
                            color: '#efd62e'
                        }
                    },
                    {
                        name: 'Video Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190,],
                        itemStyle: {
                            color: '#487af7'
                        }
                    },

                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        analysisHistogram2() {
            // console.log("thisthisthis", this)
            var chartDom = document.getElementById('analysisHistogram2');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '承保企业数占比',
                //     left: 'center',
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                    bottom: '0'
                },
                grid: {
                    top: '10%',
                    left: '0%',
                    right: '0%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['海曙区', '江北区', '鄞州区', '镇海区', '北仑区', '奉化区', '余姚市', '慈溪市', '宁海区', '象山县']
                    },

                    // fontSize = 12

                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: 'Email',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90],
                        itemStyle: {
                            color: '#f08a2a'
                        }
                    },
                    {
                        name: 'Union Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290],
                        itemStyle: {
                            color: '#efd62e'
                        }
                    },
                    {
                        name: 'Video Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410, 232, 201, 154],
                        itemStyle: {
                            color: '#487af7'
                        }
                    },

                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        // 地图显示
        // analysisMap() {
        //     // 地图echarts
        //     this.myChartMap = this.$echarts.init(document.getElementById("analysisMap1"))
        //     // 注册默认全国地图的json，这里一定要小写的china!!!
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 设置点击事件
        //     this.myChartMap.on('click', (e) => {
        //         this.mapName = e.name
        //         if (e.componentSubType == 'map') {
        //             this.getDownData(e.name)
        //         }
        //     })

        // },
        // // 点击某个省份/区县模块，下钻数据
        // async getDownData(name) {
        //     // 获取到下钻的json数据
        //     let newMapJson = await this.getMapJson(name)
        //     // 注册新下钻数据的map
        //     this.$echarts.registerMap(name, newMapJson)
        //     // 把option中map设置为最新下钻的map名称
        //     this.option.series[0].map = name
        //     this.option.geo.map = name
        //     // 设置更改后的配置项
        //     this.myChartMap.setOption(this.option)
        // },
        // // 根据点击动态获取对应下钻的json数据
        // async getMapJson(name) {
        //     let jsonData = await import('../../../../assets/map/assets/' + name + '.json')
        //     return jsonData
        // },
        handleClick(tab, event) {
            console.log(tab, event);
            console.log("11111", this.activeName);
        },
        handleClickRectification(tab, event) {
            console.log(tab, event);
            console.log("11111", this.activeName);
        },
        // 点击宁波市按钮触发
        // getNingboChart() {
        //     console.log("clickNingbo")
        //     this.mapName = null
        //     // 注册默认地图的json
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 把option中map设置为'china'名称
        //     this.option.series[0].map = '宁波市'
        //     this.option.geo.map = '宁波市'
        //     console.log("clickNingboEnd")
        //     // setTimeout(() => {
        //     this.getNingboChartAgain()
        //     // }, 100)

        // },
        // //由于单次点击无法返回上一级地图，双击之后才能返回，这里再写一个函数在上方 getNingboChart 中调用该函数来解决单次点击后等待0.1s返回上级地图
        // getNingboChartAgain() {
        //     console.log("clickNingboAgain")
        //     this.mapName = null
        //     // 注册默认地图的json
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 把option中map设置为'china'名称
        //     this.option.series[0].map = '宁波市'
        //     this.option.geo.map = '宁波市'
        //     console.log("clickNingboEndAgain")

        // },

    },



    computed: {
    },
    mounted() {
        this.barChart();
        this.analysisHistogram1();
        this.analysisHistogram2();
        // this.analysisMap();
        // console.log("map走完到这里")
    },
    components: {
        significantProportion, generalProportion, significantRectification, generalRectification, NingboMap
    }
}
</script>
<style >
.analysisTopLeftTwo {
    display: flex;
    justify-content: center;
    width: 100%;
}

.topRightTwo {
    display: flex;
    justify-content: center;
    width: 100%;
}

.analysisTopLeftTwoText {
    margin: 20px 25px;
    color: #fff;
    font-size: 14px;
    width: 100%;
}

.topRightTwoText {
    margin: 20px 20px;
    color: #fff;
    font-size: 14px;
    width: 100%;
}

.yellowText {
    text-align: center;
    width: 100%;
    color: #e6a23b;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    border-bottom: 2px solid #409EFF;
}

.redText {
    text-align: center;
    width: 100%;
    color: #ee514a;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    border-bottom: 2px solid #409EFF;
}

.analysisTopTextLeft {
    width: 100%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    /* height: 54px; */
    border-bottom: 1px dashed #409EFF;

    /* margin: 0px 0; */
}

.analysisTopTextLeftRisk {
    width: 100%;
    font-size: 16px;
    margin: 12px 0px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    /* text-align: left; */
    /* height: 54px; */
    border-bottom: 1px dashed #409EFF;
}

.analysisTopTextLeftSituation {
    width: 100%;
    font-size: 16px;
    margin: 10px 0px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #409EFF;
}

.education {
    width: 100%;
    font-size: 16px;
    margin: 10px 0px;
    color: #FFFFFF;


}

.analysisOverviewRight {
    width: 100%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: right;
    height: auto;
    border-bottom: 1px dashed #409EFF;
}

.OverviewRightRatio {
    /* width: 100%; */
    margin: 10px 0;
    /* font-size: 16px; */
    color: #FFFFFF;
    /* text-align: right; */
    display: flex;
    /* height: auto; */
    border-bottom: 1px dashed #409EFF;
}

#barChart {
    width: 100%;
    background-size: 100% 100%;
    height: 230px;
}

#analysisHistogram1,
#analysisHistogram2 {
    width: 100%;
    background-size: 100% 100%;
    height: 230px;
}

/* 地图 */
/* #analysisMap1 {
    width: 100%;
    background-size: 100% 100%;
    height: 490px;
} */

.analysisSelectBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* margin: 20px 20px; */
    margin-top: 38px;
    /* margin-left: 10px; */
    /* margin-right: 20px; */
}

/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
    position: static !important;
}

/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
    background-color: transparent !important;
}

.el-tabs__item {

    font-size: 13px !important;
    color: #7f7f7f !important;
    padding: 0 6px !important;
    height: 34px !important;

}

.el-tabs__item:hover {
    color: #FFFFFF !important;
    cursor: pointer !important;
}

.el-tabs__item.is-active {
    color: #fff !important;
}

.el-tabs {
    color: #fff !important;
    height: 36px !important;
    padding: 0 8px !important;
}

/* 透明下拉框样式穿透 */
.el-select {
    width: 110px;
    height: 25px;
}

.el-input__inner {
    background-color: transparent;
    height: 25px;
}

.el-input__icon {
    height: 100%;
}

.el-select-dropdown__item {
    color: #fff;
}

.el-scrollbar,
.el-select-dropdown {
    background-color: transparent !important;
    color: #fff !important;
}

.el-scrollbar__wrap,
.el-select-dropdown__list {
    background-color: #021d60;
    color: #fff !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.analysisTopMiddleSelect {
    width: 100%;
    margin-bottom: 0px;
    /* border-bottom: 2px dashed #409EFF; */
    /* height: auto; */
}



/* 轮播表样式穿透 */
.dv-scroll-board .header .header-item {
    font-size: 1px;
    color: '#7f7f7f';
    text-align: center;
    padding: 0 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.ceil {
    text-align: center;
}

.bottomFourBox {
    display: flex;
    margin-top: 20px;
    width: 94%;
    margin-left: 3%;
    height: 260px;
    /* display: flex;
    justify-content: space-between; */
}

.analysisBox1 {
    margin: 0 20px;
    background-color: #409EFF;
    height: 180px;
    width: 20%;
    border-radius: 23px;
    background: linear-gradient(145deg, #409EFF, #409EFF);
    box-shadow: 6px 6px 10px #031547,
        -6px -6px 10px transparent;
}

.analysisBox2 {
    margin: 0 20px;
    /* background-color: #458640; */
    height: 180px;
    width: 20%;
    border-radius: 23px;
    background: linear-gradient(145deg, #458640, #458640);
    box-shadow: 6px 6px 10px #031547,
        -6px -6px 10px transparent;
}

.analysisBox3 {
    margin: 0 20px;
    /* background-color: #409EFF; */
    height: 180px;
    width: 20%;
    border-radius: 23px;
    background: linear-gradient(145deg, #987042, #987042);
    box-shadow: 6px 6px 10px #031547,
        -6px -6px 10px transparent;
}

.analysisBox4 {
    margin: 0 20px;
    background-color: #409EFF;
    height: 180px;
    width: 20%;
    border-radius: 23px;
    background: linear-gradient(145deg, #a14d5c, #a14d5c);
    box-shadow: 6px 6px 10px #031547,
        -6px -6px 10px transparent;
}
</style>